<script lang="ts" setup>
withDefaults(defineProps<{ modelValue?: boolean }>(), {
  modelValue: false,
});

const emit = defineEmits(["update:modelValue"]);

const handleChange = (e: Event) => {
  const target = e.target as HTMLInputElement;
  emit("update:modelValue", !target.checked);
};
</script>

<template>
  <div class="umi-checkbox">
    <input type="checkbox" :checked="!modelValue" @change="handleChange" />
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.umi-checkbox {
  display: inline-flex;
  gap: 10px;
}
</style>
